<!-- 页面 -->
<template>
    <div>
        <van-nav-bar title="课程详情" left-arrow @click-left="add()">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <van-card>
            <template #tags>
                <div>
                    <p style="font-size: 1.25rem;">{{ list.title }}</p>
                    <p style="color:red; font-size: 1.125rem;"> <van-icon color="yellow" name="gold-coin-o" />
                        {{ list.price | asas1 }}</p>
                    <p>共{{ list.sales_num }}课时|{{ list.browse_num }}人已报名</p>
                    开课时间:1970-01-20 03:60:00
                </div>
            </template>
        </van-card>

        <van-card>
            <template #tags>
                <div>
                    <p style="font-size: 1.25rem;">教学团队</p>
                    <div class="jiaotuan" v-for="(item, index) in list.teachers_list">
                        <div>
                            <van-image round width="3.75rem" height="3.75rem" :src="item.teacher_avatar" />
                            <span class="aa">{{ item.teacher_name }}</span>
                        </div>
                    </div>
                </div>
            </template>
        </van-card> 

        <van-card>
            <template #tags>
                <div>
                    <p style="font-size: 1.25rem;">课程介绍</p>
                    <p>{{ list.title }}</p>
                    <p>世界之大无奇不有</p>
                </div>
            </template>
        </van-card>

        <van-card>
            <template #tags>
                <div>
                    <p style="font-size: 1.25rem;">课程大纲</p>
                    <ol>
                        <li><van-tag color="#ea7a2f" type="success">回访</van-tag>{{ list.title }}</li>
                    </ol>
                    开课时间:1970-01-20 03:60:00
                </div>
            </template>
        </van-card>
        <van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png" />
        <van-button color="#eb6100" block type="warning">立即报名</van-button>
    </div>
</template>
<!-- vue -->
<script>
export default {
    data() {
        return {
            // 声明的属性
            list: []
        }
    },
    //生命周期函数
    mounted() {
        this.list = JSON.parse(localStorage.getItem('item'))
        console.log(this.list);
    },
    // 调用方法
    methods: {
        add() {
            this.$router.push('/ke')
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
        asas1(value) {
            if (value == 0) {
                return '免费'
            }
            return value
        },
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.jiaotuan {
    width: 3.125rem;
    height: 6.25rem;
    float: left;

}

.jiaotuan .iim {
    height: 6.25rem;
    background: forestgreen;

}

.jiaotuo .aa {
    width: 3.125rem;
    height: 1.875rem;
    margin-top: 1.25rem;
}
</style>